<template>
    <div class="content" v-bind:class="{ hBar: hasTab }">
        <div class="tab-container">
            <!-- 消息列表 -->
            <transition name="fade" v-if="loaded">
                <div class="tab-container-item" v-show="showControl == 'showMsg'">
                    <template v-if="hasMsg">
                        <msg-item v-for="msg in msgList" v-bind:msgItem="msg"></msg-item>
                    </template>
                    <div v-else>没有消息</div>
                </div>
            </transition>

            <transition name="fade">
                <div class="tab-container-item" v-show="showControl == 'showContact'">
                    <div class="search-box" :class="{ active : isActive }">
                        <div class="search-input-box" @click="addSearchAnimate">
                            <div class="search-wrap">
                                <span class="pr-iconfont icon-pic"></span>
                                <input :disabled="!isActive" v-focus @keyup="keyupSearch" class="" v-model="searchValue" type="text" placeholder="搜索">
                            </div>
                        </div>
                        <div class="cancel-btn" v-show="isActive" @click="cancelSearch">
                            取消
                        </div>
                    </div>
                    <transition name="fade">
                        <div class="search-res-box" v-show="isActive">
                            <div class="item" v-for="res in searchRes">
                                <div class="item-left">
                                    <div class="item-icon">
                                        <img src="../lib/df_avatar.png" alt="">
                                    </div>
                                    <p>
                                        {{ res.userName }}
                                    </p>
                                </div>

                                <div class="item-right" data-id="{res.id}">
                                    +
                                </div>
                            </div>
                        </div>
                    </transition>

                    <!--<div class="cell-box">
                        <cell title="新的朋友" @click.native="addNewFriend"></cell>
                        <cell title="嘻嘻"></cell>
                    </div>-->
                </div>
            </transition>
        </div>
        <ul class="tab-bar">
            <li v-on:click="showMsg" v-bind:class="{ active :  showControl == 'showMsg'}">
                <span class="pr-iconfont icon-pic"></span>
                <a>消息</a>
            </li>

            <li v-on:click="showContact" v-bind:class="{ active :  showControl == 'showContact'}">
                <span class="pr-iconfont icon-pic"></span>
                <a>好友</a>
            </li>
        </ul>
    </div>
</template>

<script>
    import tabBar from './components/tab_bar.vue'
    import msgItem from './components/msg_item.vue'
    import cell from './components/cell.vue'
    var _ = require('lodash');

    export default {
        data() {
            return {
                hasTab: true,

                //切换tab 标识
                showControl: 'showContact',

                msgList: [],
                searchRes: [],
                loaded: true,
                hasMsg: true,

                showInput: false,
                searchValue: '',
                //搜索动画标识
                isActive: false
            }
        },
        directives: {
            focus: {
                // 指令的定义---
                update: function (el) {
                    // 聚焦元素
                    el.focus()
                }
            }
        },
        methods: {
            showMsg() {
                this.showControl = 'showMsg'
            },
            showContact() {
                this.showControl = 'showContact'
            },
            getMsg() {
                var data = {};
                data.id = sessionStorage.id;
                data.token = sessionStorage.token;

                this.$http({
                    method: 'post',
                    url: 'http://localhost:3000/api/getMsgList',
                    params: data
                }).then(res => {
                    var data = res.data
                    if (data.length <= 0) {
                        this.hasMsg = false;
                    } else {
                        data.forEach(val => {
                            this.msgList.push(val);
                        })
                    }
                }).catch(err => {

                });

            },
            addNewFriend() {
                this.$rt.push('/searchNewFriend');
            },
            keyupSearch() {
                this.doSearch();
            },
            //添加search animate
            addSearchAnimate() {
                if (!this.isActive) {
                    this.searchValue = '';
                }
                this.isActive = true;
            },

            //取消搜索
            cancelSearch() {
                //还原placeholder
                this.searchValue = '搜索';

                //清空搜索记录
                this.searchRes = [];

                //还原动画
                this.isActive = false;
            }
        },
        created() {

            this.getMsg();

            this.doSearch = _.debounce(() => {
                this.$http({
                    method: 'post',
                    url: 'http://localhost:3000/api/searchUser',
                    params: {
                        userName: this.searchValue,
                        id: sessionStorage.id
                    }
                }).then(res => {
                    var result = res.data;
                    this.searchRes = [];
                    if (result.status == 0) {
                        result.data.forEach(data => {
                            this.searchRes.push(data);
                        })
                    } 
                })
            }, 250)
        },
        components: {
            'msgItem': msgItem,
            'cell': cell
        }
    }
</script>